<template>
  <div>
    <div id="container">
        <router-link to="/home/index">
      <div class="icon">
        <van-icon name="arrow-left" color="white" size="25" />
      </div>
      </router-link>
      <!-- 轮播图 -->
      <div id="swipe">
        <van-swipe
          :autoplay="2000"
          :show-indicators=false
          style="height: 56.1vw"
        >
          <van-swipe-item>
            <img style="width: 100%" src="/dolphin/dolphin3.webp" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img style="width: 100%" src="/dolphin/dolphin2.webp" alt="" />
          </van-swipe-item>
          <van-swipe-item>
            <img style="width: 100%" src="/dolphin/dolphin1.webp" alt="" />
          </van-swipe-item>
        </van-swipe>
      </div>

      <!-- 下部分文字 -->
      <div id="word">
        <!-- 标题开放时间 -->
        <div id="one">
          <div id="title">海豚探秘</div>
          <div id="opentime">
            <van-icon name="clock-o" color="#0466d6" size="25" />
            <div>开放时间: 10:00-20:00</div>
          </div>
          <div id="address">
            <van-icon name="location-o" color="#0466d6" size="28"  />
            <div>海豚之家</div>
          </div>
        </div>

        <!-- 介绍 -->
        <div id="introduce">
            <div>介绍</div>
            <div>
              全新体验「海豚探秘」将让大家有更多机会近距离与海豚及海狮见面、认识它们的日常点滴及保育知识，化身成为见习动物护理员，并了解公园如何为它们提供专业及悉心的照料，借以推广海洋保育。
            </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style scoped>
.icon{
  /* background-color: #fff; */
  /* opacity: 0; */
  position: absolute;
  top: 2.5vw;
  left: 1.5vw;
  z-index: 1;
}
#word{
  position: absolute;
  top: 50vw;
  bottom: 0;
  right: 0;
  left: 0;
  border-radius: 15px;
  background-color: #fff;
}
#one{
  padding: 5vw 4vw;
  box-shadow: 0 8px 5px 3px #f5f5f5;
  border-radius: 15px;
}
#one>div:first-child{
  font-weight: bold;
  font-size: 1.5em;
}
#opentime{
  display: flex;
  margin-top: 5vw;
}
#opentime>div:last-child{
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 1vw;
}
#address{
  display: flex;
  margin-top: 3vw;
  position: relative;
  left: -0.5vw;
}
#address>div:last-child{
  font-size: 1.1em;
  font-weight: bold;
  margin-left: 0.5vw;
}
#introduce{
  padding: 5vw 4vw;
  background-color: rgb(249, 249, 250);
  position: absolute;
  top: 40vw;
  bottom: 0;
}
#introduce>div:first-child{
  font-size: 1.3em;
  font-weight: bold;
}
#introduce>div:last-child{
  letter-spacing: 1.5px;
  padding-top: 3vw;
  padding-left: 2vw;
  padding-right: 1.5vw;
  line-height: 33px;
  font-weight: bold;
  font-size: 1.1em;
}
</style>
